<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0, user-scalable=no" name="viewport" />
    <meta content="yes" name=" apple-mobile-web-app-capable" />
    <meta content="no" name="apple-touch-fullscreen" />
    <meta content="black" name=" apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection"/>
    <title>Home</title>
    <script src="../js/base.min.js"></script>
    <link rel="stylesheet" href="../css/homepage.css"/>

</head>
<body>

<section class="f1">
    <!--搜索框-->
    <div class="top" flex="cross:center main:left">
        <div class="search" flex="cross:center main:center">
            <img src="../img/home_search_sousuo.png"/>
            <input type="text" placeholder="点击输入你想要的内容" maxlength="20"/>
        </div>

        <img src="../img/home_search_kefu.png" alt=""/>
    </div>

    <!--大图标-->

    <ul class="da" flex="main:center cross:center">
        <li class="a" flex="dir:top main:center cross:center">
            <div flex="main:center cross:center">
                <img src="../img/home_top_1.png"/>
            </div>

            <p>刷卡收款</p>
        </li>

        <li class="b" flex="dir:top main:center cross:center">
            <div flex="main:center cross:center">
                <img src="../img/home_top_2.png"/>
            </div>

            <p>无卡支付</p>
        </li>

        <li class="c" flex="dir:top main:center cross:center">
            <div flex="main:center cross:center">
                <img src="../img/home_top_3.png"/>
            </div>

            <p>附近商圈</p>
        </li>

        <li class="d" flex="dir:top main:center cross:center">
            <div flex="main:center cross:center">
                <img src="../img/home_top_4.png"/>
            </div>

            <p>还信用卡</p>
        </li>

    </ul>
</section>
<!--第二层开始-->
<section class="f2">
    <ul class="xiao" flex="main:center cross:center">
        <li class="aa" flex="dir:top main:center cross:center">
            <div flex="main:center cross:center">
                <img src="../img/home_jingang_1.png"/>
            </div>

            <p>优惠券</p>
        </li>

        <li class="bb" flex="dir:top main:center cross:center">
            <div flex="main:center cross:center">
                <img src="../img/home_jingang_2.png"/>
            </div>

            <p>推荐有礼</p>
        </li>

        <li class="cc" flex="dir:top main:center cross:center">
            <div flex="main:center cross:center">
                <img src="../img/home_jingang_3.png"/>
            </div>

            <p>我的商城</p>
        </li>

        <li class="dd" flex="dir:top main:center cross:center">
            <div flex="main:center cross:center">
                <img src="../img/home_jingang_4.png"/>
            </div>

            <p>惠买单</p>
        </li>



    </ul>

    <ul class="xiao" flex="main:center cross:center">
        <li class="ee" flex="dir:top main:center cross:center">
            <div flex="main:center cross:center">
                <img src="../img/home_jingang_5.png"/>
            </div>

            <p>推荐办卡</p>
        </li>

        <li class="ff" flex="dir:top main:center cross:center">
            <div flex="main:center cross:center">
                <img src="../img/home_jingang_6.png"/>
            </div>

            <p>金融理财</p>
        </li>

        <li class="gg" flex="dir:top main:center cross:center">
            <div flex="main:center cross:center">
                <img src="../img/home_jingang_7.png"/>
            </div>

            <p>极速贷款</p>
        </li>

        <li class="hh" flex="dir:top main:center cross:center">
            <div flex="main:center cross:center">
                <img src="../img/home_jingang_8.png"/>
            </div>

            <p>行用卡申请</p>
        </li>

    </ul>
</section>


<!--第三层开始-->

<section class="f3" flex="cross:center main:center">

        <img src="../img/banner.png"/>


</section>

<!--第四层开始-->
<section class="f4">

    <div class="mingxi" flex="cross:center">
        <div class="blue"></div>
        <p>收支明细</p>

    </div>

    <ul class="jine" flex="cross:center main:center">
        <li flex="dir:top main:center cross:center">
            <p class="w">￥168.5万</p>
            <p>本月收款金额</p>
        </li>
        <li flex="dir:top main:center cross:center">
            <p class="x">￥16.5万</p>
            <p>本月支出金额</p>
        </li>
    </ul>

    <button>
        查看详细账单
    </button>

</section>


<!--底栏-->

<ul class="dilan" flex>
    <li class="home" flex="dir:top main:center cross:center">
        <div flex="main:center cross:center">
            <img src="../img/dilan_1.png"/>
        </div>
        <p>首页</p>
    </li>

    <li class="licai" flex="dir:top main:center cross:center">
        <div flex="main:center cross:center">
            <img src="../img/dilan_3.png"/>
        </div>
        <p>理财</p>
    </li>

    <li class="xiaoxi" flex="dir:top main:center cross:center">
        <div flex="main:center cross:center">
            <img src="../img/dilan_2.png"/>
        </div>
        <p>消息</p>
    </li>

    <li class="i" flex="dir:top main:center cross:center">
        <div flex="main:center cross:center">
            <img src="../img/dilan_4.png"/>
        </div>
        <p>我的</p>
    </li>
</ul>

<script>document.body.addEventListener('touchstart',function(){});</script>
</body>


</html>

